Translating a Page into a Specific Language |
|
You can implement the translation of a Web page using cordys.translation plug-in available in the Process Platform HTML5 SDK. Refer to Getting Started with the SDK for information on getting started.
In this section, you will learn how to translate the Employees Web page using the cordys.translation plug-in available in the Process Platform HTML5 SDK.
This example is built on the Employees table from the Northwind Database. This displays the employees list and the details based on the user preferences.
The following steps are involved in translating the Web page:
- Creating a Java Script message bundle
- Retrieving the message bundle
- Translating the elements
Creating a Java Script Message Bundle
A JavaScript message bundle is a collection of messages which are available for referencing from any JavaScript file. Refer to Working with Javascript Message Bundles for creating a JavaScript message bundle.
In the given example, we have created a message bundle employeewithtranslation inside the html5sdk folder for translating the Employees Web page to Dutch language.
Retrieving the Message Bundle
Retrieve the employeewithtranslation JavaScript message bundle by specifying the bundlePath in the $.cordys.translation.getBundle() API. This API considers the language code as an optional second parameter. If no language is provided, the current language of the user is used by default.
$.cordys.translation.getBundle("html5sdk/employeewithtranslation").done(function(mBundle) {
// You can do the translation here
});
Translating the elements
Adding the data-translatable attribute
To translate a label element using the translate method, add attribute data-translatable = "true" for all the elements which needs to be translated as given in the following code block:
<h1 data-translatable="true">Employees</h1>
Translating the elements
Once the message bundles are retrieved, you can use the translate() method to translate all the elements which has the attribute data-translatable = "true".
$.cordys.translation.getBundle("html5sdk/employeewithtranslation").done(function(mBundle) {
mBundle.translate();
});
Translating Messages
You can translate the messages of your Web page using the getMessage() method similar to the following code block. The Employee Web page does not have any messages for translation. Hence, this is not required in this example.
$.cordys.translation.getBundle("html5sdk/employeewithtranslation").done(function(mBundle) {
var translatedMessage = mBundle.getMessage("The capital of {0} is {1}", "UK", "London");
});
Refer to Employees with Translation for more information on the code block.
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/cordys/thirdparty/jquery/cordys.min.css" type="text/css" />
<link rel="stylesheet" href="/cordys/thirdparty/jquery/jquery.mobile.structure.min.css" type="text/css" />
<script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script>
<script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"></script>
<script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"></script>
<script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script>
<script type="text/javascript">
var mBundle,
empModel; // Reference to the model
$(function() {
// Get the message bundle on ready event
$.cordys.translation.getBundle("html5sdk/employeewithtranslation").done(function(messageBundle) {
mBundle = messageBundle;
// Translates all the labels which has data-translatable="true" attribute
mBundle.translate();
});
$("#detailsPage").bind("pageshow",function(){
// Create and refresh the page again to avoid style issues
$('#detailView').trigger("create").listview("refresh");
// Translates all the labels which has data-translatable="true" attribute on details page
mBundle.translate();
// JQuery Mobile will add two span for anchor tag so the translation will affect the styling
// Hence translating the button span text directly
$("a#backbutton span span.ui-btn-text").text(function() {
return mBundle.getMessage($(this).text());
});
});
// Create a new model
empModel = new $.cordys.model({
objectName: "Employees", // Name of the Business Object
context : document.body, // Where the data has to be bound to
read: {
// Settings for the read method
namespace: "http://schemas.cordys.com/NW",
dataType: "json",
method: "GetEmployeesObjects",
// Parameters for the method
parameters: {
fromEmployeeID: "0",
toEmployeeID: "99"
}
}
});
// Call the read method. This would fire the method with the namespace and parameters as specified in the read settings above.
empModel.read();
});
// Called on clicking an Employee
function selectEmployee(emp) {
return function(data) {
// Let us set the currently clicked item as the selected item to show in the detail page
empModel.selectedItem(data);
return true;
}
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" data-theme="b">
<h1 data-translatable="true">Employees</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="employeeList" data-role="listview" data-theme="c" data-inset="true" data-bind="foreach:Employees">
<li>
<a href="#detailsPage" data-transition="pop" class="ui-link-inherit" data-bind="click:selectEmployee($data)">
<h3 class="ui-li-heading"><span data-bind="text:FirstName"> <span data-bind="text:LastName"></h3>
<p class="ui-li-desc" data-bind="text:Address"></p>
<p class="ui-li-desc"><span data-bind="text:City"> <span data-bind="text:Country"></p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="detailsPage">
<div data-role="header" data-theme="b">
<a href="#mainPage" id="backbutton" data-role="button" data-icon="back" data-rel="back">Back</a>
<h1 data-translatable="true">Employee Details</h1>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" id="detailView" data-bind="with: selectedItem">
<li>
<div>
<a class="ui-link-inherit">
<h2 class="ui-li-heading" data-bind="text:EmployeeID"></h2>
<h3 class="ui-li-heading"><span data-bind="text:FirstName"> <span data-bind="text:LastName"></h3>
<p class="ui-li-desc"><span data-bind="text:Title"></p>
</a>
</div>
</li>
<li data-role="fieldcontain">
<div id="employeeDiv">
<div>
<label for="fldTitleOfCourtesy" data-translatable="true" class="select">Title of Courtesy</label>
<select id="fldTitleOfCourtesy" data-bind="value:TitleOfCourtesy" data-native-menu="true" data-mini="true" data-theme="c" data-inline="true">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
</select>
</div>
<div >
<label for="fldFirstName" data-translatable="true" class="ui-input-text">First Name</label>
<input type="text" id="fldFirstName" data-bind="value:FirstName" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div>
<label for="fldLastPhone" data-translatable="true" class="ui-input-text">Last Name</label>
<input type="text" id="fldLastName" data-bind="value:LastName" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldTitle" data-translatable="true" class="ui-input-text">Title</label>
<input type="text" id="fldTitle" data-bind="value:Title" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldPhone" data-translatable="true" class="ui-input-text">Phone</label>
<input type="text" id="fldPhone" data-bind="value:HomePhone" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldAddress" data-translatable="true" class="ui-input-text">Address</label>
<input type="text" id="fldAddress" data-bind="value:Address" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldCity" data-translatable="true" class="ui-input-text">City</label>
<input type="text" id="fldCity" data-bind="value:City" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldCountry" data-translatable="true" class="ui-input-text">Country</label>
<input type="text" id="fldCountry" data-bind="value:Country" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/>
</div>
<div >
<label for="fldNotes" data-translatable="true" class="ui-input-text">Notes</label>
<textarea id="fldNotes" data-bind="value:Notes" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"></textarea>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Note: This example is similar to employeeswithtranslation.htm in the demo folder in the Process Platform HTML5 SDK. Refer to the Sample Pages for more information on other demo pages available with the SDK.